<template>
<!-- 菜单管理 -->
    <div class="page">
        <section class="select">
            <module-seleclt></module-seleclt>
        </section>
        <section class="table">
            <manage-pubilc-Table ref="" :el_tableData="tableData" >
                <template slot="buttonTable">
                    <el-button style="float: right;" ><router-link :to="{path:'/add_menu'}">添加</router-link></el-button>
                </template>
                <template slot="tableShow" >
                    <el-table-column align="center" type="selection" width="55"></el-table-column>
                    <el-table-column align="center" v-for="item in tableShow" :key="item.index"  :prop="item.prop"  :label="item.label"></el-table-column>
                    <el-table-column align="center" label="操作" >
                        <template slot-scope="scope">
                            <el-button type="text" size="small" @click="handle_edit_page(scope.row)">编辑</el-button>
                            <el-button type="text" size="small" @click="handle_delete_page(scope.row.id,scope.$index)">删除</el-button>
                        </template>
                    </el-table-column>
                </template>
            </manage-pubilc-Table>
        </section>
        <section class="pagination">
            <manage-pubilc-pagination :el_pagination="pagination" @el-handleSizeChange="handleSizeChange" @el-handleCurrentChange="handleCurrentChange"></manage-pubilc-pagination>
        </section>
    </div>
</template>
<script>
import moduleSeleclt from "./module/select.vue"
import pubilcPaginationMinxin from "manage-sys-libs/src/components/managePubilcPagination/mixins/index"
import {typeArry} from "@/utils/constArray"
export default {
    mixins: [pubilcPaginationMinxin],
    components:{
        moduleSeleclt,
    },
    data(){
        return{
            tableShow:[
                {index:0,prop:"orderNum",label:"菜单编号"},
                {index:1,prop:"parentId",label:"菜单父级编号"},
                {index:2,prop:"name",label:"菜单名称"},
                {index:3,prop:"typeData",label:"菜单类型"},
                // {index:4,prop:"icon",label:"菜单图标"},
                {index:5,prop:"description",label:"菜单描述"},
                {index:6,prop:"href",label:"菜单路径"},
            ],
            tableData: [],
            pagination:{
                total:1,
                pageSize:10,
                currentPage4:1
            }

        }
    },
    methods:{
        // 获取列表
        getlist(val){
            this.tableData = val;
            this.tableData.forEach(item => {
                item.typeData = typeArry[item.type]
            });
        },
        // 点击编辑页面
        handle_edit_page(row){
            // 存入vuex
            this.$store.dispatch("menu_page/list_menuListItem",row);
            // 打开编辑页面
            this.$router.push({path:'/edit_menu',query:{type:"edit"}})
        },
        //点击删除
        handle_delete_page(val,index){
            this.$store.dispatch("menu_page/delete_menuAddObj",{id:val})
            .then(res=>{
               if(res){
                   this.tableData.splice(index,1)
               }
           })
        }
    }
}
</script>